<template>
	<view>
		<form @submit="subRefund" report-submit='true'>
			<view class='apply-return'>
				<view class='goodsStyle acea-row row-between borRadius14'>
					<view class='pictrue'>
						<image :src='orderItem.picUrl' />
					</view>
					<view class='text acea-row row-between'>
						<view class='name line2'>{{ orderItem.spuName }}</view>
						<view class='money'>
							<view>￥{{(parseFloat(orderItem.price) / 100.0).toFixed(2)}}</view>
							<view class='num'>x{{ orderItem.count}}</view>
						</view>
					</view>
				</view>
				<view class='list borRadius14'>
					<view class='item acea-row row-between-wrapper'>
						<view>售后方式</view>
						<!-- 如果未发货，则只能退款 -->
						<view class="" v-if="order.status === 10">仅退款</view>
						<picker v-else class='num' @change="wayChange" :value="wayIndex" :range="ways">
							<view class="picker acea-row row-between-wrapper">
								<view class='reason'>{{ ways[wayIndex] }}</view>
								<text class='iconfont icon-jiantou'></text>
							</view>
						</picker>
					</view>
					<!-- TODO 芋艿：按照有赞的做法；未发货，不输入件数；已发货，可调整 -->
					<view class='item acea-row row-between-wrapper'>
						<view>退货件数</view>
						<view class='num'>{{ orderItem.count }}</view>
					</view>
					<!-- TODO 芋艿：后端改成可以填写金额 -->
					<view class='item acea-row row-between-wrapper'>
						<view>退款金额</view>
						<view class='num'>￥{{ (parseFloat(orderItem.payPrice) / 100.0).toFixed(2) }}</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>退款原因</view>
						<picker class='num' @change="bindPickerChange" :value="reasonIndex" :range="reasons">
							<view class="picker acea-row row-between-wrapper">
								<view class='reason'>{{ reasons[reasonIndex] }}</view>
								<text class='iconfont icon-jiantou'></text>
							</view>
						</picker>
					</view>
					<view class='item textarea acea-row row-between'>
						<view>备注说明</view>
						<textarea placeholder='填写备注信息，100字以内' class='num' name="applyDescription"
							placeholder-class='填写备注信息，100字以内' />
					</view>
					<view class='item acea-row row-between' style="border: none;">
						<view class='title acea-row row-between-wrapper'>
							<view>上传凭证</view>
							<view class='tip'>( 最多可上传3张 )</view>
						</view>
						<view class='upload acea-row row-middle'>
							<view class='pictrue' v-for="(item,index) in applyPicUrls" :key="index">
								<image :src='item' />
								<view class='iconfont icon-guanbi1 font-color' @tap='DelPic(index)' />
							</view>
							<view class='pictrue acea-row row-center-wrapper row-column' @tap='uploadpic'
								v-if="applyPicUrls.length < 3">
								<text class='iconfont icon-icon25201' />
								<view>上传凭证</view>
							</view>
						</view>
					</view>
					<button class='returnBnt bg-color' form-type="submit">提交</button>
				</view>
			</view>
		</form>
	</view>
</template>
<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import * as TradeOrderApi from '@/api/trade/order.js';
	import * as AfterSaleApi from '@/api/trade/afterSale.js';
	import * as TradeConfigApi from '@/api/trade/config.js';
	export default {
		data() {
			return {
				orderId: 0,
				orderItemId: 0,
				order: {}, // 订单
				orderItem: {}, // 订单项

				wayIndex: 0, // 选中 ways 的位置
				ways: ['仅退款', '退款退货'], // 可选的售后方式

				reasons: [], // 售后原因
				reasonIndex: 0, // 选中 reasons 的位置

				applyPicUrls: [], // 补充凭证图片

				tradeConfig: {}, // 交易配置
			};
		},
		// computed: mapGetters(['isLogin']),
		// watch:{
		// 	isLogin:{
		// 		handler: function(newV, oldV) {
		// 			if (newV) {
		// 				this.getOrderInfo();
		// 				this.getRefundReason();
		// 			}
		// 		},
		// 		deep:true
		// 	}
		// },
		onLoad: function(options) {
			// if (!this.isLogin) {
			// 	toLogin();
			// 	return;
			// }
			if (!options.orderId || !options.orderItemId) {
				return this.$util.Tips({
					title: '缺少订单id,无法退款'
				}, {
					tab: 3,
					url: 1
				});
			}
			this.orderId = parseInt(options.orderId);
			this.orderItemId = parseInt(options.orderItemId);
			this.getOrderInfo();
			this.getRefundReason();
			this.getTradeConfig();
		},
		methods: {
			onLoadFun: function() {
				this.getOrderInfo();
				this.getRefundReason();
				this.getTradeConfig();
			},
			/**
			 * 获取订单详情
			 */
			getOrderInfo: function() {
				TradeOrderApi.getOrderDetail(this.orderId).then(res => {
					// 设置订单信息
					const order = res.data;
					this.order = order;
					// 查询订单项信息
					this.orderItem = order.items.find(item => item.id === this.orderItemId) || {};
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				})
			},

			/**
			 * 更改售后方式
			 */
			wayChange: function(e) {
				this.$set(this, 'wayIndex', e.detail.value);
				this.getRefundReason();
			},
			/**
			 * 获得售后方式
			 */
			getWay: function() {
				return this.wayIndex === 0 ? 10 : 20
			},
			/**
			 * 获取退款理由
			 */
			getRefundReason: function() {
				const way = this.getWay();
				if (way === 10) {
					this.reasons = this.tradeConfig.afterSaleRefundReasons || [];
				} else {
					this.reasons = this.tradeConfig.afterSaleReturnReasons || [];
				}
			},
			/**
			 * 选择售后原因
			 */
			bindPickerChange: function(e) {
				this.$set(this, 'reasonIndex', e.detail.value);
			},
			getTradeConfig: function() {
				TradeConfigApi.getTradeConfig().then(res => {
					this.tradeConfig = res.data || {};
					this.getRefundReason();
				});
			},

			/**
			 * 删除图片
			 */
			DelPic: function(index) {
				this.applyPicUrls.splice(index, 1);
			},
			/**
			 * 上传文件
			 */
			uploadpic: function() {
				this.$util.uploadImageOne({}, res => {
					this.applyPicUrls.push(res.data);
					this.$set(this, 'applyPicUrls', this.applyPicUrls);
				});
			},

			/**
			 * 申请退货
			 */
			subRefund: function(e) {
				const formData = e.detail.value;
				AfterSaleApi.createAfterSale({
					orderItemId: this.orderItemId,
					way: this.getWay(),
					refundPrice: this.orderItem.payPrice,
					applyReason: this.reasons[this.reasonIndex],
					applyDescription: formData.applyDescription,
					applyPicUrls: this.applyPicUrls,
				}).then(res => {
					this.$util.Tips({
						title: '申请成功',
						icon: 'success'
					}, {
						tab: 5,
						url: '/pages/users/user_return_detail/index?id=' + res.data
					});
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.apply-return {
		padding: 20rpx 30rpx 70rpx 30rpx;
	}

	.apply-return .list {
		background-color: #fff;
		margin-top: 18rpx;
		padding: 0 24rpx 70rpx 24rpx;
	}

	.apply-return .list .item {
		min-height: 90rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 30rpx;
		color: #333;
	}

	.apply-return .list .item .num {
		color: #282828;
		width: 427rpx;
		text-align: right;
	}

	.apply-return .list .item .num .picker .reason {
		width: 385rpx;
	}

	.apply-return .list .item .num .picker .iconfont {
		color: #666;
		font-size: 30rpx;
		margin-top: 2rpx;
	}

	.apply-return .list .item.textarea {
		padding: 24rpx 0;
	}

	.apply-return .list .item textarea {
		height: 100rpx;
		font-size: 30rpx;
	}

	.apply-return .list .item .placeholder {
		color: #bbb;
	}

	.apply-return .list .item .title {
		height: 95rpx;
		width: 100%;
	}

	.apply-return .list .item .title .tip {
		font-size: 30rpx;
		color: #bbb;
	}

	.apply-return .list .item .upload {
		padding-bottom: 36rpx;
	}

	.apply-return .list .item .upload .pictrue {
		border-radius: 14rpx;
		margin: 22rpx 23rpx 0 0;
		width: 156rpx;
		height: 156rpx;
		position: relative;
		font-size: 24rpx;
		color: #bbb;
	}

	.apply-return .list .item .upload .pictrue:nth-of-type(4n) {
		margin-right: 0;
	}

	.apply-return .list .item .upload .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 14rpx;
	}

	.apply-return .list .item .upload .pictrue .icon-guanbi1 {
		position: absolute;
		font-size: 45rpx;
		top: -10rpx;
		right: -10rpx;
	}

	.apply-return .list .item .upload .pictrue .icon-icon25201 {
		color: #bfbfbf;
		font-size: 50rpx;
	}

	.apply-return .list .item .upload .pictrue:nth-last-child(1) {
		border: 1rpx solid #ddd;
		box-sizing: border-box;
	}

	.apply-return .returnBnt {
		font-size: 32rpx;
		color: #fff;
		width: 100%;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 43rpx auto;
	}
</style>